<template>
    <div class="advertisement">
        <adver-pop v-if="isShow" @clickBox="hide_box"></adver-pop>
        <div class="advertisementTop">
            <ul>
                <li v-for="(item,index) in topTitle" @click="tabSwtich(index)">
                    <router-link to="" :class="{active:flag == index}">{{item.titleName}}</router-link>
                </li>
            </ul>
        </div>
        <div class="contentBox">
            <div class="adverBox">
                <div class="addBtn">
                    <button @click="showBox"><i class="icon iconfont icon-tianjia"></i><span>添加广告</span></button>
                </div>
                <div class="adverContent">
                    <div class="adverTitle">
                        <div class="title title_1">
                            <span>标题</span>
                        </div>
                        <div class="title title_2">
                            <span>图片</span>
                        </div>
                        <div class="title title_3">
                            <span>有效时间</span>
                        </div>
                        <div class="title title_4">
                            <span>投放区域</span>
                        </div>
                        <div class="title title_5">
                            <span>跳转类型</span>
                        </div>
                        <div class="title title_6">
                            <span>跳转地址</span>
                        </div>
                        <div class="title title_7">
                            <span>操作</span>
                        </div>
                    </div>
                    <div class="adverList">
                        <div class="list">
                            <div class="con con_1">
                                <span>dddcdfdfsddffgdgdfgghjyjhkfghghjhfghdfg</span>
                            </div>
                            <div class="con con_2">
                                <img src="../../../static/images/LOVE.jpg" alt="">
                                <span>查看</span>
                            </div>
                            <div class="con con_3">
                                <span>2018-06-04 至 2018-07-04</span>
                            </div>
                            <div class="con con_4">
                                <span>dd</span>
                            </div>
                            <div class="con con_5">
                                <span>dd</span>
                            </div>
                            <div class="con con_6">
                                <span>dd</span>
                            </div>
                            <div class="con con_7">
                                <button class="change"><i class="icon iconfont icon-xiugai"></i>修改</button>
                                <button class="delete"><i class="icon iconfont icon-shanchu"></i>删除</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import adverPop from '@/components/pop/adverPop'
    export default {
        name: "advertisingOperation",
        components:{
            adverPop
        },
        data() {
            return {
                flag: 0,
                isShow:false,
                topTitle: [{
                    titleName: "首页横幅",
                }, {
                    titleName: "楼盘列表页横幅",
                }, {
                    titleName: "楼盘列表页推荐",
                }, {
                    titleName: "门店列表页横幅",
                }, {
                    titleName: "门店列表页推荐",
                }, {
                    titleName: "综合服务商列表页横幅",
                }, {
                    titleName: "综合服务商列表页推荐",
                }]
            }
        },
        methods: {
            tabSwtich(index) {
                this.flag = index;
            },
            showBox(){
                this.isShow = true;
            },
            hide_box(){
                this.isShow = false;
            }
        }
    }
</script>
<style lang="scss">
    .advertisement {
        position: relative;
        width: 96%;
        margin-left: 2%;
        background-color: #ffffff;
        box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
        border-radius: 0px 4px 4px 4px;
        top: 30px;
        .advertisementTop {
            width: 100%;
            height: 50px;
            border-bottom: solid 1px rgba(100, 145, 170, 0.3);
            ul {
                width: 94%;
                margin-left: 3%;
                height: 50px;
                .active {
                    color: #40dcbf;
                    border-bottom: 3px solid #40dcbf;
                }
                li {
                    display: inline-block;
                    height: 50px;
                    line-height: 50px;
                    font-family: 'MicrosoftYaHei';
                    font-size: 14px;
                    color: #6491aa;
                    a {
                        display: inline-block;
                        height: 47px;
                        line-height: 47px;
                        font-family: 'MicrosoftYaHei';
                        font-size: 14px;
                        color: #6491aa;
                        margin-right: 58px;
                    }
                    a:hover {
                        color: #40dcbf;
                        border-bottom: 3px solid #40dcbf;
                    }
                }
            }
        }
        .contentBox {
            width: 100%;
            .adverBox {
                width: 98%;
                margin-left: 1%;
                .addBtn {
                    margin-top: 20px;
                    button {
                        position: relative;
                        width: 110px;
                        height: 34px;
                        border: 0;
                        outline: none;
                        background-color: #40dcbf;
                        cursor: pointer;
                        font-family: 'MicrosoftYaHei';
                        font-size: 14px;
                        color: #fefefe;
                        span {
                            margin-left: 4px;
                        }
                    }
                }
                .adverContent {
                    width: 100%;
                    .adverTitle {
                        width: 100%;
                        border-bottom: solid 2px rgba(120, 175, 205, 0.5);
                        height: 48px;
                        clear: both;
                        .title {
                            float: left;
                            height: 100%;
                            line-height: 50px;
                            span {
                                font-family: 'MicrosoftYaHei';
                                font-size: 14px;
                                font-weight: bold;
                                color: #48697b;
                                margin-left: 15px;
                            }
                        }
                        .title_1 {
                            width: 17%;
                        }
                        .title_2 {
                            width: 12%;
                        }
                        .title_3 {
                            width: 17%;
                        }
                        .title_4 {
                            width: 12%;
                        }
                        .title_5 {
                            width: 12%;
                        }
                        .title_6 {
                            width: 12%;
                        }
                        .title_7 {
                            width: 15%;
                        }
                    }
                    .adverList {
                        width: 100%;
                        .list {
                            position: relative;
                            width: 100%;
                            height: 69px;
                            clear: both;
                            border-bottom: solid 1px rgba(120, 175, 205, 0.2);
                            .con {
                                float: left;
                                height: 100%;
                                position: relative;
                                span {
                                    margin-left: 15px;
                                    font-family: 'MicrosoftYaHei';
                                    font-size: 14px;
                                    color: #48697b;
                                    top: 24px;
                                    position: relative;
                                }
                            }
                            .con_1 {
                                width: 17%;
                                span {
                                    width: 80%;
                                    overflow: hidden;
                                    white-space: nowrap;
                                    text-overflow: ellipsis;
                                }
                            }
                            .con_2 {
                                width: 12%;
                                img {
                                    position: relative;
                                    top: 10px;
                                    width: 50px;
                                    margin-left: 15px;
                                    border: solid 1px #78afcd;
                                }
                                span {
                                    color: #72b2d5;
                                    top: -10px;
                                    margin-left: 4px;
                                }
                            }
                            .con_3 {
                                width: 17%;
                            }
                            .con_4 {
                                width: 12%;
                            }
                            .con_5 {
                                width: 12%;
                            }
                            .con_6 {
                                width: 12%;
                                span {
                                    width: 80%;
                                    overflow: hidden;
                                    white-space: nowrap;
                                    text-overflow: ellipsis;
                                }
                            }
                            .con_7 {
                                width: 15%;
                                button {
                                    position: relative;
                                    border: 0;
                                    outline: none;
                                    width: 78px;
                                    height: 26px;
                                    background-color: #ffffff;
                                    font-family: 'MicrosoftYaHei';
                                    font-size: 14px;
                                    top: 20px;
                                    cursor: pointer;
                                    i {
                                        margin-right: 2px;
                                    }
                                }
                                .change {
                                    border: solid 1px #40dcbf;
                                    color: #40dcbf;
                                    margin-left: 15px;
                                }
                                .delete {
                                    border: solid 1px #f29b76;
                                    color: #f29b76;
                                    margin-left: 15px;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
</style>

